<template>
      <div>
            <div class="cartHeader">
                  <div class="cartImgTop" @click="cartDown">
                        <i class="cartBadge">{{totalCount}}</i>
                  </div>
                  <i class="cartCow"></i>
                  <div style="overflow:hidden;background:white">
                        <div style="float:left">
                              <span class="checkNone checkAll" @click="selectAll">全选</span>
                              <span>(已选{{selectCount}}件)</span>
                        </div>
                        <span class="clearCart" @click="emptyCart">清空购物车</span>
                  </div>
            </div>
          <ul>
                <li v-for="list in cart" :key="list.id" class="cartList" style="background:white">
                        <span class="checkItem" @click="selectSingle(list)" :class="{ItemChecked:list.check}"></span>
                        <img :src="list.imgsrc" class="cartImgP">
                        <div class="cartTitleBox">
                              <h1 class="cartTitle">{{list.title1}}</h1>
                              <span class="cartPrice">¥ {{list.price}}</span>
                              <div class="addReduce">
                                    <template v-if="list.id in $root.cart[shopId]">
                                          <span class="goodsOper goodsReds" @click="goodsSub(list)"></span>
                                          <span class="goodsOper goodsNum">{{list.num}}</span>
                                    </template>
                                    <span class="goodsOper goodsAdd" @click="goodsAdd(list)"></span>
                              </div>
                        </div>
                </li>
          </ul>
      </div>
</template>
<script>
export default {
      data(){
            return {
                  cart:this.$root.cart[this.shopId],
            }
      },
      props:['shopId'],
      methods:{
             // 商品减少方法
            goodsSub(goods){
                  if(goods.num>1){
                        goods.num--
                  }else{
                        goods.num=0
                        this.$delete(this.$root.cart[this.shopId],goods.id)
                  } 
            },
            // 商品增加方法
            goodsAdd(goods){
                  if(goods.id in this.$root.cart[this.shopId]){
                        if(goods.num<goods.store){
                              goods.num++
                        }
                  }else{
                        goods.num++
                        this.$set(this.$root.cart[this.shopId],goods.id,goods)
                  }
            },
            // 全部选择中方法
            selectAll(){
                  this.jq(event.target).toggleClass('checkAll')
                  if(this.jq(event.target).is('.checkAll')){
                        for(var item in this.$root.cart[this.shopId]){
                              this.$root.cart[this.shopId][item].check=true
                        }
                        this.jq('.checkItem').addClass('ItemChecked')
                  }else{
                        for(var item in this.$root.cart[this.shopId]){
                              this.$root.cart[this.shopId][item].check=false
                        }
                        this.jq('.checkItem').removeClass('ItemChecked')
                  }
            },
            //单选方法
            selectSingle(goods){
                  this.jq(event.target).toggleClass('ItemChecked') 
                  if(this.jq(event.target).is('.ItemChecked')){
                        goods.check=true
                  }else{
                        goods.check=false
                  }
                  let ck=this.jq('.checkItem').length,
                        ch=this.jq('.ItemChecked').length;
                  if(ck!=ch){
                        this.jq('.checkNone').removeClass('checkAll')
                  }else{
                        this.jq('.checkNone').addClass('checkAll')
                  }
            },
            // 清空购物车方法
            emptyCart(){
                  this.jq('.cartCover').css('display','none')
                  this.jq('.cartImg').css('display','block')
                  this.jq('.cartGoodsBox').css('display','none')
                  this.jq('.cartText2').css('left','6rem')
                  for(var item in this.cart){
                        this.cart[item].num=0
                        this.cart[item].check=true
                        this.$delete(this.$root.cart[this.shopId],this.cart[item].id)
                  }
            },
            cartDown(){
                  this.jq('.cartGoodsBox').slideUp('500')
                  this.jq('.cartCover').css('display','none')
                  this.jq('.cartText2').animate({
                        left:'6rem'
                  },500)
                  setTimeout(()=>{
                        this.jq('.cartImg').css('display','block')
                  },300)
            }
      },
      created(){
            this.jq('.cartList').css('border-color','white')
      },
      computed:{
            totalCount(){
              var num=0;
              for(var item in this.$root.cart[this.shopId]){
                  num+=Number(this.$root.cart[this.shopId][item].num)
              }
              return num
            },
            selectCount(){
                  var num=0;
                  for(var item in this.$root.cart[this.shopId]){
                        if(this.$root.cart[this.shopId][item].check){
                              num+=Number(this.$root.cart[this.shopId][item].num)
                        }
                  }
                  return num
                  }
      }
}
</script>
<style >
/* 购物车头部样式 begin */
.cartHeader{
      /* height: 40px; */
      line-height: 40px;
      color: #333;
      font-size: 14px;
      border-bottom: 1px solid #ebebeb;
      position: relative;
}
.cartImgTop{
      width:6rem;
      height:5rem;
      background:url('/static/img/cart.png') no-repeat center -72px;
      background-size: 50px auto;
      z-index: 401;
}
.cartCow{
      display: inline-block;
      position: absolute;
      width: 1rem;
      height: 0.8rem;
      bottom: 39px;
      left: 29px;
      background: url('/static/img/a.png') no-repeat center;
      background-size:1rem 0.8rem;
}
.checkNone{
      background: url('/static/img/ck.png') no-repeat 1rem 2px;
      padding-left: 3.2rem;
      padding-right: 0.5rem;
      display: inline-block;
      height: 2rem;
      background-size: 20px auto;
      line-height: 2rem;
}

.clearCart{
      float: right;
      background: url('/static/img/delete.png') no-repeat left center;
      background-size: 13px auto;
      color: #666;
      padding-left: 1.5rem;
      padding-right: 1rem;
}
/* 购物车头部样式 end */

/* 购物车列表样式 begin */
.cartList{
      display: flex;
      padding-left: 1rem;
      border-bottom: 1px solid #e8e8e8;
}
.checkItem{
      display: inline-block;
      width: 2rem;
      height: 2rem;
      background: url('/static/img/ck.png') no-repeat left 0;
      background-size: 20px auto;
      align-self:center;
}
.cartImgP{
      width: 52px;
      height:52px;
      margin:1rem 0.7rem 
}
.cartTitleBox{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1
}
.cartTitle{
      line-height: 36px;
      color: #555;
      font-size: 14px;
}
.cartPrice{
      line-height: 20px;
      color: #ff3434;
      font-size: 16px;
}
.addReduce{
      position: relative;
}
.lineRemove{
      border-bottom: none;
}
/* 购物车列表样式 end */

.checkAll{
      background: url('/static/img/ck.png') no-repeat 1rem -197px;
      background-size: 20px auto;
}
.ItemChecked{
      background: url('/static/img/ck.png') no-repeat left -197px;
      background-size: 20px auto;
}
</style>

